<template>

  <el-main>

    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="出租状态" prop="region">
        <el-select v-model="queryForm.status" placeholder="请选择出租状态">
          <el-option label="请选择" value=""></el-option>
          <el-option label="已出租" value="1"></el-option>
          <el-option label="未出租" value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="发布状态" prop="region">
        <el-select v-model="queryForm.publishStatus" placeholder="请选择发布状态">
          <el-option label="请选择" value=""></el-option>
          <el-option label="已发布" value="1"></el-option>
          <el-option label="未发布" value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="楼盘搜索">
        <el-input v-model="queryForm.name" clearable placeholder="请输入楼盘名称关键字"></el-input>
      </el-form-item>
      <el-form-item label="房源搜索">
        <el-input v-model="queryForm.roomName" clearable placeholder="请输入房源名称关键字"></el-input>
      </el-form-item>


      <el-form-item>
        <el-button type="primary" @click="onQuery">查询</el-button>
      </el-form-item>
    </el-form>

    <el-table

      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="houseId"
        label="房源ID">
      </el-table-column>
      <el-table-column  prop="frontCover" label="图片" width="180">
        <template slot-scope="scope">
          <el-image style="width: 100px; height: 100px" :src="scope.row.frontCover"></el-image>
        </template>
      </el-table-column>
      <el-table-column
        prop="roomName"
        label="房源名称">
      </el-table-column>
      <el-table-column
        prop="name"
        label="楼盘名称">
      </el-table-column>
      <el-table-column
        prop="roomCode"
        label="房源编号">
      </el-table-column>
      <el-table-column
        prop="proportion"
        label="面积">
      </el-table-column>
      <el-table-column
        prop="rental"
        label="租金">
      </el-table-column>
      <el-table-column
        prop="direction"
        label="朝向">
      </el-table-column>
      <el-table-column
        :formatter="s1"
        prop="status"
        label="房源状态">
      </el-table-column>
      <el-table-column
        :formatter="s2"
        prop="publishStatus"
        label="发布状态">
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryForm.pageNo"
      :limit.sync="queryForm.pageSize"
      @pagination="getList"
    />

  </el-main>
</template>

<script>
  import {listMenu} from "@/api/hourse/fangyuan";
    export default {
        name: "index",
      data() {
        return {
          loading: true,
          tableData: [],
          queryForm:{
            pageNo:1,
            pageSize:10
          },
          total:0
        }
      },
      methods:{
        //分页大小PageSize改变事件
        handleSizeChange(pageSize) {
          console.log(pageSize)
          this.queryForm.pageSize = pageSize;
          //根据分页和查询条件 ajax请求后台列表数据 给tabledata给分页组件的变量赋值
          this.getList();
        },
        handleCurrentChange(pageNo) {
          console.log(pageNo)
          this.queryForm.pageNo = pageNo;
          //根据分页和查询条件ajax请求后台列表数据 给tabledata 给分页组件的变量赋值
          this.getList();
        },
        onQuery(){
          this.getList();
        },

        getList() {
          listMenu(this.queryForm).then(response => {
            console.log(response)
            this.tableData = response.data;
            this.total = response.data.total;
          });
        },
        s1(row){
          console.log(row.status);
          if (row.status==1){
            return this.tableData.status="已出租";
          }else {
            return this.tableData.status="未出租";
          }
        },
        s2(row){
          console.log(row.publishStatus);
          if (row.publishStatus==1){
            return this.tableData.publishStatus="已发布";
          }else {
            return this.tableData.publishStatus="未发布";
          }
        },
      },
      created() {
        this.getList();
      }
    }
</script>

<style scoped>

</style>
